<template>
    <div class="container">
        <!-- header -->
        <div class="header">
            <div style="display:inline-block">
                <p class="header-title">学校:</p>
                <el-cascader
                    ref="myCascader"
                    v-model="college"
                    :options="dataList"
                    @change="fnGetCollage(1)"
                    size="small"
                    clearable
                    :props="{
                        value: 'id',
                        label: 'name',
                        children: 'children'
                    }"
                />
            </div>

            <div style="display:inline-block">
                <p class="header-title">学校:</p>
                <el-input
                    v-model="keyword"
                    placeholder="请输入关键字"
                    suffix-icon="el-icon-search"
                    size="small"
                    clearable
                    class="search-ipt"
                    @keyup.native.enter="getTableData(1)"/>
            </div>

        </div>

        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            border
        >
            <el-table-column
                label="序号"
                type="index"
                width="100"
                align="center"
            />
            <el-table-column
                label="学校名称"
                prop="school_name"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            />
            <el-table-column
                label="反馈总人数"
                prop="report_num"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
                sortable
            >
                <template slot-scope="scope">
                    <div
                        @click="fnGoPage(scope.row,99)"
                        class="fontcolor">
                        {{ scope.row.report_num }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="详情"
                prop="id"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <a
                        class="checkInfo"
                        href="javascript:;"
                        @click="fnCheckInfo(scope.row)">
                        查看详情
                    </a>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->

        <!-- 详情弹窗 -->
        <el-dialog
            title="反馈详情"
            width="80%"
            :lock-scroll= "false"
            :visible.sync="showDataInfo"
            :before-close="handleCancle"
        >
            <el-table
                :data="feedbackData"
                style="width: 100%"
                height="600px"
                :row-style="rowStyle"
                border
            >
                <el-table-column
                    type="index"
                    label="题目序号"
                    width="80"
                    align="center"
                />
                <el-table-column
                    prop="question"
                    label="题目"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-popover
                            placement="bottom"
                            title="详情"
                            width="200"
                            trigger="hover"
                            :content="scope.row.question_title"/>
                        <div class="select">{{ scope.row.question_title }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="options"
                    label="选项"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        <div
                            class="select"
                            v-for="(item,index) in JSON.parse(scope.row.question_option_json)"
                            :key="index">
                            {{ (index + 1 + '.') +item }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    class="feedbackNum"
                    label="反馈总人数"
                    prop="report_num"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                    sortable
                >
                    <template slot-scope="scope">
                        <div
                            class="fontcolor"
                            @click="fnGoPage(scope.row,99)">
                            {{ scope.row.report_num }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="题目有误"
                    prop="question_error_num"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        <div
                            v-if="scope.row.question_error_num != ''"
                            @click="fnGoPage(scope.row,1)">
                            <p class="data-num fontcolor">{{ scope.row.question_error_num }}</p>
                            <p class="data-num">( {{ Number(scope.row.question_error_num / scope.row.report_num*100).toFixed(2) }}% )</p>
                        </div>
                        <div v-else>
                            --
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="有错别字"
                    prop="question_typo_num"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        <div
                            v-if="scope.row.question_typo_num != ''"
                            @click="fnGoPage(scope.row,2)">
                            <p class="data-num fontcolor">{{ scope.row.question_typo_num }}</p>
                            <p class="data-num">( {{ Number(scope.row.question_typo_num / scope.row.report_num*100).toFixed(2) }}% )</p>
                        </div>
                        <div v-else>
                            --
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="答案有误"
                    prop="answer_error_num"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        <div
                            v-if="scope.row.answer_error_num != ''"
                            @click="fnGoPage(scope.row,3)">
                            <p class="data-num fontcolor">{{ scope.row.answer_error_num }}</p>
                            <p class="data-num">( {{ Number(scope.row.answer_error_num / scope.row.report_num*100).toFixed(2) }}% )</p>
                        </div>
                        <div v-else>
                            --
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="其他"
                    prop="question_other_num"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        <div
                            v-if="scope.row.question_other_num != ''"
                            @click="fnGoPage(scope.row,0)">
                            <p class="data-num fontcolor">{{ scope.row.question_other_num }}</p>
                            <p class="data-num">( {{ Number(scope.row.question_other_num / scope.row.report_num*100).toFixed(2) }}% )</p>
                        </div>
                        <div v-else>
                            --
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div
                class="pagination-wrapper clearfix"
                v-if="feedbackData.length >= 0"
            >
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="diaPage.now_page"
                    :total="diaPage.total_count"
                    :page-size="diaPage.page_size"
                    @current-change="fnCheckData"
                />
            </div>
        </el-dialog>
        <!-- /详情弹窗 -->

        <!-- 分页 -->
        <div
            class="pagination-wrapper clearfix"
            v-if="tableData.length >= 0"
        >
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>
        <!-- /分页 -->
    </div>
</template>

<script>
export default {
    data () {
        return {
            showDataInfo: false,
            tableData: [],
            keyword:'',
            dataList:[],
            college:'',
            schoolName:'',
            schoolId:'',
            feedbackData:[],
            idList:[],
            cityId:'',
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            diaPage: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
        };
    },

    created(){
        this.fnGetCity();
        this.setHeader();
        this.getTableData();
    },

    mounted(){
        // 按照提交的人数把数据倒叙排列
        this.tableData.sort(this.sortIndex);
    },

    methods: {
        rowStyle () {
            return 'height: 100px';
        },

        /**
         * 设置表单header
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [{
                title: "APP后台",
            },
            {
                title: '社交'
            },
            {
                title: "反馈数据"
            }]
            );
        },

        /**
         * 获取二级联动数据
         */
        fnGetCity () {
            this.$post('/student/region_college%5Ccity_college_linkage', {}, resp => {
                if (resp.code == 1) {
                    this.dataList = resp.data;
                    this.dataList.map((item)=>{
                        item.children.unshift({
                            children:[],
                            // city是用来判断 是否是筛选当前城市的所有数据
                            id:'city',
                            name:'全部'
                        });
                        item.children.map((item)=>{
                            this.idList.push(item);
                            delete item.children;
                        });
                    });
                }
            });
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/forum_exam_count%5Cget_list', {
                page_id: page || this.page.now_page,
                school_id: this.college[1] == 'city'?'':this.college !== '' ? this.college[1] : '',
                school_name: this.keyword !== '' ? this.keyword : this.schoolName,
            }, resp => {
                if(resp.code == 1){
                    this.tableData = resp.data.list;
                    this.tableData.sort(this.sortIndex);
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 排列数据
         */
        sortIndex(a,b){
            if(b.report_num == a.report_num){
                return b.report_time - a.report_time;
            } else {
                return b.report_num - a.report_num;
            }
        },


        /**
         * 打开数据详情弹窗
         */
        fnCheckInfo (row) {
            this.showDataInfo = true;
            this.schoolId = row.school_id;
            this.$post('/student/forum_exam_count%5Cget_detail', {
                page_id: this.page.now_page,
                school_id: this.schoolId,
            }, resp => {
                if(resp.code == 1){
                    this.feedbackData = resp.data.list;
                    this.diaPage.now_page = resp.data.page.now_page;
                    this.diaPage.total_count = resp.data.page.total_count;
                    this.diaPage.page_size = resp.data.page.page_size;
                }
                this.feedbackData.sort((a,b)=>{
                    return b.report_num-a.report_num;
                });
            });
        },
        /**
         * 数据详情弹窗分页
         */
        fnCheckData (row) {
            this.$post('/student/forum_exam_count%5Cget_detail', {
                page_id: this.diaPage.now_page,
                school_id: this.schoolId,
            }, resp => {
                if(resp.code == 1){
                    this.feedbackData = resp.data.list;
                    this.diaPage.now_page = resp.data.page.now_page;
                    this.diaPage.total_count = resp.data.page.total_count;
                    this.diaPage.page_size = resp.data.page.page_size;
                }
                this.feedbackData.sort((a,b)=>{
                    return b.report_num-a.report_num;
                });
            });
        },
        fnGetCollage(page){
            this.keyword = '';
            this.schoolName = '';
            this.dataList.map((item)=>{
                item.children.map((item)=>{
                    if(this.college[1] == item.id){
                        this.schoolName = item.name;
                    }
                });
            });
            if(this.schoolName == '全部') {
                this.schoolName = '';
            }
            if(this.college[1] == 'city'){
                this.cityId = this.college[0];
                this.$post('/student/forum_exam_count%5Cget_list', {
                    page_id: page || this.page.now_page,
                    school_name: this.keyword !== '' ? this.keyword : this.schoolName,
                    city_id: this.keyword==''?this.cityId:'',
                }, resp => {
                    if(resp.code == 1){
                        this.tableData = resp.data.list;
                        this.tableData.sort(this.sortIndex);
                        this.page.now_page = resp.data.page.now_page;
                        this.page.total_count = resp.data.page.total_count;
                        this.page.page_size = resp.data.page.page_size;
                    }
                });
            } else {
                this.getTableData(1);
            }
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /**
         * 关闭弹窗
         */
        handleCancle(){
            this.showDataInfo = false;
        },

        /**
         * 跳转页面
         */
        fnGoPage(row,type){
            this.$router.replace({
                name: 'feedbackmanagement',
                query: {
                    key_word: row.question_title ? row.question_title : row.school_name,
                    type: type != undefined ? type : '',
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
    .container {
        padding: 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        background: #fff;
        .operation-wrapper {
            display: flex;
            flex-direction: row-reverse;
            padding: 12px 23px;
            background-color: #fff;
        }
        .header {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            &-title {
                display: inline-block;
                color: #262626;
                margin-left: 20px;
                margin-right: 5px;
            }
            .search-ipt {
                width: 260px;
            }
        }

        .pagination-wrapper {
            padding-top: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    .select{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .checkInfo{
        color: #409EFF;
        cursor: pointer;
    }
    .el-table{
        text-align: center;
    }
    .fontcolor{
        color: #409EFF;
        cursor: pointer;
    }
    .data-num{
        display: inline-block;
    }
</style>